<template>
	<div style="width:100%;background:white;">
	<!-- <div style="height:auto;">
			<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
	  <img src="../../assets/images/login1/allSale@2x.png" alt="">
	  </div></el-col>
</el-row>

	</div> -->

		<div class="header">
			<div class="logo">
				<img src="../../assets/images/login1/allSale@2x.png" alt="">
			</div>
			<div class="right-menu" style="min-width:3.12rem;">
				<ul class="layui-nav" style="background:white;">
					<li class="layui-nav-item" @mouseover="showlanguage" @mouseout="hidelanguage" style="line-height:.8rem;">
						<a href="javascript:;" style="min-width:.8rem;color:black;"  >{{language}}</a>
						<dl class="layui-nav-child" > 
							<dd v-for="(item,index) of (aboutlanguage.chooseLanguage)" v-bind:key="index"><a href="#" @click="chooseLanguage(index)">{{item.language}}</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item" style="line-height:.8rem;">
						<a href="./merchants.html" target="_blank" style="color:black;">{{$t('login.header.Application')}}</a>
					</li>
					<li class="layui-nav-item" style="line-height:.8rem;">
						<a href="#" style="color:black;">{{$t('login.header.Download')}}</a>
					</li>
				</ul>
				
			</div>

		</div>

		<div class="banner banner-content">

			<div class="login-aside">

				<!-- <div id="o-box-up"></div>
				<div id="o-box-down" style="table-layout:fixed;">
					<div class="title">
						<span>
							<span>AllSale</span>
							<span>{{$t('login.center.title')}}</span>
						</span>
					</div>

					<div class="registerform">
						<div class="form-item">
							<i class="input-icon icon-user"></i>
							<input v-model="form.model.username" class="ws-input" :placeholder="$t('login.center.inputEmail')" autofocus="autofocus" @keypress="loginInput" />
						</div>
						<div class="form-item">
							<i class="input-icon icon-password"></i>
							<input v-model="form.model.password" class="ws-input" type="password" :placeholder="$t('login.center.inputPassword')" @keypress="loginInput" />
						</div>
						<div class="form-item">
							<button class="ws-login-btn" @click="login">{{$t('login.center.login')}}</button>
						</div>
						<div class="form-item" style="font-size: 16px;margin-top: 10px;float: right;">
							<span><a href="./findpassword.html" style="color: rgb(255, 168, 71); ">{{$t('login.center.forgetPassword')}}</a></span>
						</div>
						<div class="form-item" v-show="!form.vad.result" style="color: #FFA847;font-size: 16px;">
							<i class="ivu-icon ivu-icon-information-circled" style="padding-right: 5px"></i>
							<span v-text="form.vad.message"></span>
							
						</div>
						<Spin size="large" fix v-if="form.vad.showSpin">
							<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                			<div>Loading</div>
						</Spin>
					</div>

				</div> -->

			</div>

			<div style="width:4.8rem;height:5.19rem;backgroun-color:white;position:absolute;top:1.48rem;right:2.9rem;background:white;">
					<div style="width:1.51rem;min-height:.3rem;margin:.74rem auto .44rem;display:block;">
						<img src="../../assets/images/login1/allSale@2x.png" alt="" style="width:1.51rem;height:.4rem;">
					</div>
					<div style="width:4.2rem;height:1.44rem;margin:0 auto;">
							<input type="text" style="width:4.2rem;height:.46rem;border:1px solid #DDD;padding-left:.1rem;font-size:.2rem;" v-model="form.model.username"  :placeholder="$t('login.center.inputEmail')" autofocus="autofocus" @keypress="loginInput" >
							<input v-model="form.model.password" type="password" :placeholder="$t('login.center.inputPassword')" @keypress="loginInput" style="margin-top:.3rem;width:4.2rem;height:.46rem;border:1px solid #DDD;padding-left:.1rem;font-size:.2rem;" >
							<button @click="login" style="margin-top:.3rem;width:4.2rem;height:.6rem;background-color:#af1e23;font-size:.23rem;text-align:center;color:white;line-height:.6rem;border:none;">{{$t('login.center.login')}}</button>
							<p style="color:#DDD;text-align:center;margin-top:.2rem;font-size:.2rem;"><a href="./findpassword.html" style="color: rgb(255, 168, 71); ">{{$t('login.center.forgetPassword')}}</a></p>
							<div class="form-item" v-show="!form.vad.result" style="color: #FFA847;font-size: .16rem;">
							<i class="ivu-icon ivu-icon-information-circled" style="padding-right: .05rem"></i>
							<span v-text="form.vad.message"></span>
						</div>
						<Spin size="large" fix v-if="form.vad.showSpin">
							<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                			<div>Loading</div>
						</Spin>
					</div>
			</div>
			<div style="width:3.94rem;height:1.2rem;margin:3.2rem 7.1rem 4.8rem 4.16rem">
				<img src="../../assets/images/login1/allSale_logo@2x.png" alt="" v-if="this.$i18n.locale === 'zh'" style="width:3.94rem;height:1.2rem;">
				<img src="../../assets/images/login1/en_allSale_logo@2x.png" alt="" v-if="this.$i18n.locale === 'en'" style="width:3.94rem;height:1.2rem;">
				<img src="../../assets/images/login1/it_allsale_logo@2x.png" alt="" v-if="this.$i18n.locale === 'it'" style="width:4.4rem;height:1.2rem;">
			</div> 
			
		</div>

		<!-- <div class="footer">
			<p>Copyright &copy; 2018.德艺汇电子商务有限公司</p>
		</div> -->
	</div>
</template>

<script>
document.documentElement.style.fontSize =
  (document.documentElement.clientWidth / 1880) * 100 + "px";
import Util from "../../common/util.js";
import JsEncrypt from "jsencrypt";
import $ from "jquery";

export default {
  data() {
    return {
      language: '',
      form: {
        model: {
          type: 3, //商户系统
          grantType: "password",
          username: "",
          password: ""
        },
        rules: {},
        vad: {
          result: true,
          showSpin: false,
          message: ""
        }
      },
      aboutlanguage: {
        hasChangeLanguage: false,
        chooseLanguage: []
      }
    };
  },
  computed: {},
  mounted() {

	  console.log(this.$i18n.locale);
	  console.log(localStorage.currentLanguage)
    if (!localStorage.currentLanguage) {
		this.language = '中文简体';
      this.$i18n.locale = "zh";
	  localStorage.setItem("currentLanguage", this.$i18n.locale);
	  this.aboutlanguage.chooseLanguage = [{
            language: "English",
            languageCode: "en"
          },
          {
            language: "Italiano",
            languageCode: "it"
          }];
	  console.log(1)
    }else{
		let i = this.$i18n.locale = localStorage.currentLanguage;
		this.language = (function(){
			switch (i) {
			case 'zh':
				return '中文简体'
			break;
			case 'it':
			return 'Italiano'
			break;
			case 'en':
			return 'English'
			break;
			default:
			return '中文简体'
				break;
		}
		})();
		this.aboutlanguage.chooseLanguage = this.selectChangeLanguage(this.$i18n.locale);
		console.log(2);
	}

    // this.aboutlanguage.hasChangeLanguage=localStorage.getItem('hasChangeLanguage');
    // let thisCurrentLanguage=this.aboutlanguage.hasChangeLanguage;
    // 设置选择的系统语言
    // if(thisCurrentLanguage){
    // 	this.$i18n.locale='en';
    // 	localStorage.setItem('currentLanguage',this.$i18n.locale);
    // 	localStorage.setItem('hasChangeLanguage',thisCurrentLanguage);
    // }else{
    // 	this.$i18n.locale='zh';
    // 	localStorage.setItem('currentLanguage',this.$i18n.locale);
    // 	localStorage.setItem('hasChangeLanguage',thisCurrentLanguage);
    // }
  },
  methods: {
    login() {
      let username = this.form.model.username;
      let password = this.form.model.password;
      if (Util.vad.isBlank(username) || Util.vad.isBlank(password)) {
        return;
      }

      const _this = this;

      this.axios
        .get("/woauth/pubkey?username=" + this.form.model.username + "&type=3")
        .then(
          function(response) {
            let resData = response.data;
            _this.flag = false;
            console.log(resData);
            if (0 === resData.meta.code) {
              _this.loginSubmit(resData.data);
            } else {
              _this.showError("系统异常登录失败");
            }
          },
          function() {
            _this.flag = false;
          }
        );
    },
    encodePassword(pubKey, pwd) {
      let jse = new JSEncrypt();
      let publicKey = pubKey;
      jse.setPublicKey(publicKey);
      let encryptData = jse.encrypt(pwd);
      return encryptData;
    },
    loginSubmit(pubKey) {
      this.form.vad.showSpin = true;
      let _this = this;
      let enpwd = this.encodePassword(pubKey, this.form.model.password);
      const postData = {
        type: 3, //商户系统
        username: this.form.model.username,
        password: enpwd,
        grantType: "password",
        client: "web"
      };
      this.axios.post("/woauth/token", postData).then(function(response) {
        let res = response.data;
        let resMeta = res.meta;
        if (0 == resMeta.code) {
          //登录成功
          let tokenData = res.data;
          localStorage.clear();
          localStorage.setItem(Util.tokenKey(), JSON.stringify(tokenData));
          // 将当前的语言类型保存在store中
          localStorage.setItem("currentLanguage", _this.$i18n.locale);
          // localStorage.setItem('hasChangeLanguage',_this.aboutlanguage.hasChangeLanguage);
          window.location.href = Util.homePath();
        } else {
          _this.showError(resMeta.message);
        }
        _this.form.vad.showSpin = false;
      });
    },
    showError(message) {
      this.form.vad.result = false;
      this.form.vad.message = message;
    },
    /**
     * 输入框回车
     */
    loginInput(e) {
      let keyCode = event.keyCode;
      if (32 === keyCode) {
        event.preventDefault();
        return;
      }
      if (13 === keyCode) {
        // 将当前的语言类型保存在store中
        this.login();
        return;
      }
	},
	selectChangeLanguage(i){
		switch (i) {
			case 'zh':
				return [
            {
              language: "English",
              languageCode: "en"
            },
            {
              language: "Italiano",
              languageCode: "it"
            }
          ]
			break;
			case 'it':
			return [
            {
              language: "English",
              languageCode: "en"
            },
            {
              language: "中文简体",
              languageCode: "zh"
            }
          ]
			break;
			case 'en':
			return [
            {
              language: "中文简体",
              languageCode: "zh"
            },
            {
              language: "Italiano",
              languageCode: "it"
            }
          ]
			break;
			default:
			return [
            {
              language: "English",
              languageCode: "en"
            },
            {
              language: "Italiano",
              languageCode: "it"
            }
          ]
				break;
		}
      
	},
    /**
     * 选择语言版本
     */
    showlanguage() {
      $(".layui-nav-child").show();
    },
    hidelanguage() {
      $(".layui-nav-child").hide();
    },
    changelanguage(index) {
      let _this = this;
      console.log("this.$i18n.locale==" + _this.$i18n.locale);

      // 查看vuex--store存储数据
      // console.log('所选择的语言list下标:'+index);
      // console.log('所选择的语言:'+_this.aboutlanguage.language[index]);
      // console.log(_this.$i18n.messages);

      let thisLanguage = _this.aboutlanguage.hasChangeLanguage;
      _this.aboutlanguage.hasChangeLanguage = !thisLanguage;
      // console.log('thisLanguage==='+_this.aboutlanguage.hasChangeLanguage);
      if (_this.aboutlanguage.hasChangeLanguage) {
        _this.$i18n.locale = "en";
        localStorage.setItem("currentLanguage", _this.$i18n.locale);
        // localStorage.setItem('hasChangeLanguage',_this.aboutlanguage.hasChangeLanguage);
      } else {
        _this.$i18n.locale = "zh";
        localStorage.setItem("currentLanguage", _this.$i18n.locale);
        // localStorage.setItem('hasChangeLanguage',_this.aboutlanguage.hasChangeLanguage);
      }
    },

    chooseLanguage(index) {
      var _this = this;
      // console.log('所选择的语言list下标:'+index);
      // console.log('所选择的语言:'+_this.aboutlanguage.chooseLanguage[index].language);
      // console.log('所选择的语言code:'+_this.aboutlanguage.chooseLanguage[index].languageCode);
      // 将所选择的语言languageCode保存至缓存
      // localStorage.setItem('chooseLanguageCode',_this.aboutlanguage.chooseLanguage[index].languageCode);
      console.log(_this.$i18n.locale);
      // return
      let language = this.selectChangeLanguage(_this.aboutlanguage.chooseLanguage[index].languageCode);

      _this.$i18n.locale =
		_this.aboutlanguage.chooseLanguage[index].languageCode;
		this.language = _this.aboutlanguage.chooseLanguage[index].language;
      localStorage.setItem("currentLanguage", _this.$i18n.locale);

      _this.aboutlanguage.chooseLanguage = language;
    }
  }
};
</script>

<style>
html {
  font-size: 100px;
  /* overflow-x: hidden; */
}
body {
  width: 100%;
  margin: 0 auto;
  overflow: auto !important;
}

body a {
  color: #fff;
}

.login-text {
  background: url("../../assets/images/login/icon-user.png") no-repeat left
    center;
}

.password-text {
  background: url("../../assets/images/login/icon-password.png") no-repeat left
    center;
}
.header {
  height: 0.8rem;
  margin: 0 auto;
  position: relative;
  width: 12rem;
  z-index: 2;
  background-color: white;
}

.header .right-menu {
  float: right;
  text-align: center;
  line-height: 0.4rem;
}

.content-menu {
  list-style: none;
  /* 去掉ul前面的符号 */
  margin: 0px;
  /* 与外界元素的距离为0 */
  padding: 0px;
  /* 与内部元素的距离为0 */
  width: auto;
  /* 宽度根据元素内容调整 */
  height: 0.5rem;
  line-height: 0.54rem;
  padding-right: 0.3rem;
}

.content-menu > li {
  padding: 0 0.15rem;
  color: #fff;
  cursor: pointer;
}

.content-menu > li {
  float: left;
}

.form-item {
  position: relative;
  margin-top: 0.34rem;
}

.icon-user {
  background: url(../../assets/images/login/icon-user.png) no-repeat center;
  background-size: 0.3rem 0.3rem;
}

.icon-password {
  background: url(../../assets/images/login/icon-password.png) no-repeat center;
  background-size: 0.3rem 0.3rem;
}

.input-icon {
  position: absolute;
  top: 0.1rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.3rem;
  z-index: 1;
  border-right: 1px solid #e8e8e8;
  line-height: 0.3rem;
}

.ws-input {
  width: 100%;
  height: 0.5rem;
  border: 1px solid #e8e8e8;
  line-height: 0.5rem;
  font-size: 0.2rem;
  padding-left: 0.5rem;
  color: #666;
}

.ws-login-btn {
  width: 100%;
  height: 0.5rem;
  background: #ed9d2c;
  border: none;
  font-size: 0.26rem;
  color: #fff;
  cursor: pointer;
}

.title {
  height: 0.56rem;
  line-height: 0.56rem;
  border-bottom: #fff solid 1px;
  color: #fff;
  font-size: 0.23rem;
  margin-top: 0.1rem;
}

.title > span {
  height: 0.35rem;
  line-height: 0.35rem;
}

#o-box-up,
#o-box-down {
  width: 4.6rem;
  height: 4rem;
  position: absolute;
  border-radius: 0.05rem;
  padding: 0 0.15rem;
}

#o-box-up {
  background-color: #000;
  filter: alpha(opacity: 40);
  opacity: 0.4;
}

.download a {
  margin: 0 0.2rem;
  float: left;
}

.logo {
  width: 2rem;
  /*border:1px solid red;*/
  display: inline-block;
  margin-left: 1rem;
  /*text-align: center;*/
  line-height: 0.8rem;
  height: 0.8rem;
}

.logo img {
  width: 1.51rem;
  height: 0.4rem;
  float: left;
  margin: 0.2rem 0.3rem;
}

.logo h2 {
  color: #fff;
  font-size: 0.2rem;
}

.registerform {
  margin: 0px 0.15rem;
}

.login {
  /*margin:0 auto;*/
  width: 2.75rem;
  height: 0.4rem;
  border: 1px solid #5f6a72;
  font-size: 0.16rem;
}

.banner {
  width: 19.2rem;
  /* min-width: 1000px; */
  position: relative;
  height: 10.8rem;
  overflow: hidden;
}

.footer {
  text-align: center;
  font-size: 0.12rem;
  color: #999999;
  padding: 0.3rem 0px;
}

.login-aside {
  position: absolute;
  /*width: 320px;
		height: 380px;*/
  z-index: 9999999;
  border-radius: 5px;
  left: 58%;
  top: 0.4rem;
}

.banner-content {
  background: url(../../assets/images/login1/merchantLogin@2x.jpg);
  width: 18.8rem;
  height: 8.71rem;
  /* margin-top: 80px; */
}

.error-box {
  color: #f7ccc8;
  font-size: 0.12rem;
  margin-bottom: 0.1rem;
}

/* 登录页国际化 */
.layui-nav-child {
  top: 0.6rem !important;
}
</style>